<template>
  <div class="rl31dg-2 iKCdHH">
    <div class="rl31dg-3 fCytZy">
      <div class="sc-1d9uflq-1 kjzgGw">
        <div class="sc-1vhl1ud-0 iAHSCb">
          <h1 class="jc6i63-0 sc-1d9uflq-2 cmoiYo">选择应用仓库</h1>
          <p class="djs2am-0 sc-1d9uflq-3 hVuhLe">
            自动创建应用数据和生成持续集成脚本
          </p>
        </div>

        <div class="sc-494z8g-0 sc-14i1hry-0 kEwNER">
          <span style="font-size: 13px">
            项目连接Gitlab可以更好的帮你进行项目管理，实时跟进项目开发进度和情况
          </span>
        </div>
        
        <div class="zfc3g7-0 cFMoVy">
          <div
            class="ksa0ua-0 elwCEo"
            v-for="(item, index) in svnList"
            :key="index"
          >
            <div class="sc-1ngwmbv-3 cZlSjT git-host-item dash-size-regular">
              <div class="sc-icons">
                <img :src="giticon(item)" />
              </div>
              <div class="sc-1ngwmbv-4 gWayKh git-label">
                <div class="sc-1ngwmbv-1 jPmxjq title-text">
                  {{ item.gitName }}
                </div>
              </div>
              <div class="sc-1ngwmbv-4 gWayKh git-label" style="width: 80%">
                <div class="sc-1ngwmbv-1 title-text" style="text-align: left">
                  {{ item.fieldProp }}
                </div>
              </div>
              <div class="sc-1ngwmbv-5 ghKyco">
                <button
                  @click="bingGit(item)"
                  v-if="item.hasBing != 1"
                  class="aap711-0 LrZpX dash-color-primary dash-size-regular"
                  style="background-color: #ffba00"
                  :class="selectGit == index ? 'selected' : ''"
                >
                  <span><i class="fas fa-unlink"></i> 绑定仓库</span>
                </button>
                <button
                  @click="openConnectGit(item)"
                  v-else
                  class="aap711-0 LrZpX dash-color-primary dash-size-regular"
                  :class="selectGit == index ? 'selected' : ''"
                >
                  <span><i class="fas fa-link"></i> 发布到此</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="输入项目空间"
      :visible.sync="gitlabDialogVisible"
      v-if="gitlabDialogVisible"
      width="900px"
    >

      <!-- <el-table :data="gitGroupList" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="gitlabDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="generatorGit('form')"
          >确 定</el-button
        >
      </span> -->

      <group-list :selectGit="selectGit" :gitTypeId="gitTypeId" />

    </el-dialog>
  </div>
</template>

<script>
import { getSvnList, generatorGitProject, uploadGitProject } from "./api";
import { getGitGroups } from "@/api/Git";
import GroupList from './groupList.vue'

export default {
  components:{
    GroupList
  } , 
  data() {
    return {
      // 显示信息
      gitlabDialogVisible: false,
      // git分组
      gitGroupList: [],
      cicdDialogVisible: false,
      formLabelWidth: "120px",
      selectGit: "-1",
      form: {
        namespace: "",
        projectId: "",
        autocreate: "",
        projectName: "",
        gitTypeId: "" ,
        gitProjectId: "" , 
        gitType: "" ,
      },
      containerList: [
        {
          icon: "fab fa-docker",
          name: "容器服务",
          isConnect: false,
          status: 0,
        },
      ],
      svnList: [],
      rules: {
        namespace: [
          { required: true, message: "请输入项目空间", trigger: "blur" },
        ],
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    var seedProjectCode = sessionStorage.getItem("seedProjectCode");
    console.log("seed project code = " + seedProjectCode);

    this.form = JSON.parse(seedProjectCode);
    this.getSvn();
  },
  methods: {
    getSvn() {
      getSvnList().then((response) => {
        this.svnList = response.data;
      });
    },
    // 获取git 图标
    giticon(item) {
      const gitType = item.gitType;
      if (gitType === "gitea") {
        return require("@/asserts/images/giticon/gitea.png");
      } else if (gitType === "gitee") {
        return require("@/asserts/images/giticon/gitee.png");
      } else if (gitType === "gitlab") {
        return require("@/asserts/images/giticon/gitlab.png");
      }
    },
    // 打开选择空间
    openConnectGit(item) {
      this.selectGit = item.gitType;
      this.gitTypeId = item.id ;

      if(item.gitType === 'gitee'){
        this.generatorGit(item) ;
      } else {
        if(item.gitType === 'gitea' && item.innerGit == 1){
          this.generatorGit(item) ;
        }else{
          this.gitlabDialogVisible = true;
        }
      }

      // getGitGroups(item.id).then((res) => {
      //   console.log("res = " + res);
      //   this.gitGroupList = res.data;
      // });
    },
    connectGit(item) {
      console.log("item = " + item);
      this.form.namespace = item.namespace;
      this.generatorGit(this.form, item);
    },
    bingGit(item) {
      var toPath = "/com/alinesno/cloud/business/buildGit/list";
      this.$router.push({ path: toPath });
    },
    generatorGit(item) {
      const loading = this.$loading({
        lock: true,
        text: "工程正在生成，预计1分钟，请耐心等待...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      this.form.gitType = item.gitType;
      this.form.gitTypeId = item.id ;
      this.form.gitProjectId = item.id;

      uploadGitProject(this.form).then(
        (response) => {
          loading.close();
          if (response.code !== 200) {
            this.$message({
              message: "工程生成失败:" + response.msg,
              type: "waring",
            });
          } else {
            this.$message({
              message: "工程生成成功" , 
              type: "success",
            });
            var projectId = response.projectId ;
            var toPath = '/build/overview/' + projectId ;
            this.$router.push({path: toPath});
          }
        },
        (error) => {
          loading.close();
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/asserts/css/build/connectGit.scss";

.dingtalk-icons {
  width: 20px;
  margin-right: 10px;
}

.sc-icons {
  height: 100%;
  font-size: 30px;
  margin-right: 10px;
  color: #005bd4;

  img {
    width: 35px;
    background: #f6f8fc;
    border-radius: 50%;
  }
}

.dash-color-primary {
  margin-left: 20px;
}

.git-label {
  width: 100px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>


